<template>
  <div class="app-container">
    <ehead index="7"></ehead>

    <div style="background-color: rgb(255 255 255 / 100%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          表单二维码生成器，纸质表格电子化，扫码即可填写表单
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          在二维码中添加表单，表单内容自主设计，快速收集数据
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          二维码不仅能展示图文音视频内容，还能记录设备状态，查看巡检、维保等信息
        </div>
        <div>
          <el-row gutter="20" class="mt-10">
            <el-col :span="12">
              <div class="box">
                <h2>
                  <img src="https://www.hlcode.cn/_nuxt/img/form-h.d42d155.png" alt="" />
                  使用包含表单的二维码模板
                </h2>
                <p>
                  模板库提供多种包含表单的二维码模板，适用于设备巡检、巡查、维保、登记等场景，使用模板简单替换内容即可生成二维码。
                </p>
                <a href="/mb">
                  <el-button type="primary" style="margin-top: 12px"> 选择二维码模板 </el-button>
                </a>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="box">
                <h2>
                  <img src="https://www.hlcode.cn/_nuxt/img/form-temp.657aae6.png" alt="" />
                  创建表单二维码
                </h2>
                <p>
                  点击「关联表单」，可自由组合姓名、手机号、单选框、多选框等组件，或使用表单模板，搭建出业务表单，关联到二维码即可扫码填写。
                </p>
                <a href="/v3">
                  <el-button type="primary" style="margin-top: 12px">创建表单</el-button>
                </a>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          常见问题
        </div>

        <el-row class="mt-10">
          <el-col :span="12">
            <div class="m-2" style="font-size: 20px; font-weight: 600">支持上传哪些文件格式？</div>
            <div class="m-2">
              所有版本均支持上传 pdf、doc、ppt、xls 等常见的文件格式，但为了保证安全，不支持高风险类型文件。
            </div>
            <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">上传的文件大小有限制吗？</div>
            <div class="m-2">
              不同版本允许上传的单个文件大小也不同，免费版10MB，基础版100MB，高级版200MB，旗舰版300MB，企业专属版300MB。
            </div>
          </el-col>
          <el-col :span="12">
            <div class="m-2" style="font-size: 20px; font-weight: 600">如何关闭文件的下载？</div>
            <div class="m-2">上传的pdf、doc、ppt、xls等文件默认是允许下载的，也可以关闭文件的下载。</div>
            <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">文件内容是否有限制？</div>
            <div class="m-2">
              根据国家相关法律法规要求，用户不得上传任何违法或侵犯第三方合法权益的文件，一经发现将会限制二维码的访问或者封禁账号。
            </div>
          </el-col>
        </el-row>
      </div>
    </div> -->
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          低成本搭建业务系统
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          自定义表单内容，快速收集数据，适用于出入登记、签到、报名、保修等
        </div>
        <div>
          <el-row gutter="20">
            <el-col :span="12">
              <div class="text-center mt-4">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241119155323.jpg"
                  style="width: auto; height: 333px; margin: 0 auto"
                />
                <h3 class="mt-4">操作简单，扫码即可填写</h3>
                <p>纸质表格电子化，扫码即可查看内容并填写</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text-center mt-4">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241119155330.jpg"
                  style="width: auto; height: 333px; margin: 0 auto"
                />
                <h3 class="mt-4">表单数据后台实时查看</h3>
                <p>电脑和手机均可实时查看，支持数据导出到Excel文件</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="text-center mt-10">
          <a href="/mb">
            <el-button
              class="mt-10"
              color="#333333"
              size="large"
              style="width: 140px; height: 50px; margin: 0 auto; font-size: 16px"
              >去模板库创建</el-button
            >
          </a>
        </div>
      </div>
    </div>
    <div style="background-color: rgb(255 255 255 / 100%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          低成本搭建业务系统
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          自定义表单内容，快速收集数据，适用于出入登记、签到、报名、保修等
        </div>
        <div>
          <el-row>
            <el-col :span="12">
              <div class="text-center mt-4">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241119155337.jpg"
                  style="width: auto; height: 333px; margin: 0 auto"
                />
                <h3 class="mt-4">操作简单，扫码即可填写</h3>
                <p>纸质表格电子化，扫码即可查看内容并填写</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text-left mt-4 pl-6">
                <h3 class="mt-4">随时掌握设备状态</h3>
                <h3 class="mt-4">及时排除故障</h3>
                <p class="mt-4">二维码上显示当前设备状态，状态可根据最新的 巡检记录自动变更</p>
                <p class="mt-4">电脑/手机端状态看板可实时查看所有设备状态， 及时排除故障</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c my-10">
      <div class="content">
        <div>
          <el-row gutter="20">
            <el-col :span="12">
              <div class="text-left mt-4 pl-6">
                <h3 class="mt-4">防止现场人员作假</h3>
                <h3 class="mt-4">确保数据真实可靠</h3>
                <p class="mt-4">自动获取表单填写人员定位和手机号，只允许现场拍照提交，照片自带水印。</p>
                <p class="mt-4">添加手写签名，保证数据的真实。</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text-center mt-4">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241119155343.jpg"
                  style="width: auto; height: 333px; margin: 0 auto"
                />
                <h3 class="mt-4">操作简单，扫码即可填写</h3>
                <p>纸质表格电子化，扫码即可查看内容并填写</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="text-center mt-10">
          <a href="/mb">
            <el-button
              class="mt-10"
              color="#333333"
              size="large"
              style="width: 140px; height: 50px; margin: 0 auto; font-size: 16px"
              >去模板库创建</el-button
            >
          </a>
        </div>
      </div>
    </div>
    <efoot></efoot>
  </div>
</template>

<script setup>
import ehead from '@/views/components/index/head.vue';
import efoot from '@/views/components/index/foot.vue';
onMounted(() => {});
</script>
<style scoped lang="less">
.content {
  width: 1200px;
  margin: 0 auto;
}
.c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 60px 20px;
  min-width: 1200px;
}
.box {
  padding: 24px 30px;
  background: #fff;
  box-shadow: 0 3px 5px 0 rgba(16, 16, 16, 0.07);
  border-radius: 4px;
}
.box h2,
.box h3 {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  line-height: 32px;
}
.box h2 img,
.box h3 img {
  margin-right: 5px;
  width: 28px;
  height: 28px;
  vertical-align: -7px;
  float: left;
}
.box p {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 24px;
}
</style>

